<template>
	<view class="wrapper">
		<view class="invite-popup">
			<view class="invite-info">
				<view class="anchor-wrap">
					<image class="avatar anchor-avatar" :src="inviteInfo.anchor.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="name">{{inviteInfo.anchor.name}}</text>
						<view class="tag">
							<image class="tag-icon" src="/static/img/anchor_icon.png" mode=""></image>
							<text class="tag-title">红娘</text>
						</view>
					</view>
				</view>
				<view class="audience-wrap">
					<image class="avatar audience-avatar" :src="inviteInfo.guest.avatar" mode="aspectFill"></image>
					<view v-if="inviteInfo.guest.id != ''" class="user-info">
						<text class="name">{{inviteInfo.guest.name}}</text>
						<view class="info">
							<text class="age">{{inviteInfo.guest.age}}</text>
							<text class="city">{{inviteInfo.guest.city}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="invite-intro">
				<text class="title">{{invite_title}}</text>
				<text v-if="type == 'private'" class="intro">{{invite_desc}}</text>
			</view>
			<view class="btn-wrap">
				<view class="btn">
					<button type="default" @click="cancel">取消</button>
				</view>
				<view class="btn">
					<button type="primary" @click="enter">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myInfo: {},
				name: '',
				inviteInfo: {
					roomid: -1,
					anchor: {
						id: '',
						name: '',
						avatar: '',
						sex: '',
						age: '',
						city: '',
					},
					guest: {
						id: '',
						name: '',
						avatar: '../../static/img/invite_sex2.png',
						age: '',
						city: ''
					},
					application_rose: ''
				},
				type: '',
				invite_title: '',
				invite_desc: ''
			}
		},
		onLoad(options) {
			this.type = options.type
			let inviteInfo = JSON.parse(decodeURIComponent(options.inviteInfo))
			this.inviteInfo.roomid = inviteInfo.roomid
			this.inviteInfo.anchor = inviteInfo.anchor
			this.inviteInfo.application_rose = inviteInfo.application_rose
			if (inviteInfo.guest) {
				this.inviteInfo.guest = inviteInfo.guest
			}
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.log(e)
			}
			if (this.type == 'private') {
				this.invite_title = this.inviteInfo.anchor.name + '邀请您专属相亲'
				if (this.myInfo.sex == '1') {
					this.invite_desc = this.inviteInfo.application_rose + '米币(每分钟)'
				}
			}
			if (this.type == 'public') {
				this.invite_title = this.inviteInfo.anchor.name + '邀请您相亲'
			}
			if (this.type == 'seven') {
				this.invite_title = this.inviteInfo.anchor.name + '邀请您交友'
			}
		},
		onUnload() {
			
		},
		onReady() {
			
		},
		methods: {
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			enter() {
				if (this.type == 'private') {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V1.LoveStart',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						rid: this.inviteInfo.roomid
					}, res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
						if (res.status) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + res.data.rome.id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('------>申请加群', imResponse.data)
							}).catch(imError => {
								console.warn('------>申请加群失败', imError);
							});
							let custom_ext = {
								roomid: this.inviteInfo.roomid,
								id: this.myInfo.id,
								name: this.myInfo.name,
								avatar: this.myInfo.avatar,
								sex: this.myInfo.sex,
								age: this.myInfo.age,
								city: this.myInfo.city
							}
							let message = this.$tim.createCustomMessage({
								to: this.IDBEFORE + this.inviteInfo.anchor.id,
								conversationType: this.TIM.TYPES.CONV_C2C,
								payload: {
									data: 'Joined',
									description: '上麦成功',
									extension: JSON.stringify(custom_ext)
								}
							});
							this.$tim.sendMessage(message).then(imResponse => {
								console.log('------>上麦成功', imResponse);
							}).catch(imError => {
								console.warn('------>上麦失败', imError);
							});
							getApp().globalData.invite_list = res.data.list;
							let live = {
								room: {
									id: res.data.rome.id,
									name: res.data.rome.name,
								},
								character: 'audience',
								url: res.data.play,
								gift: {
									id: res.data.gift.id,
									name: res.data.gift.name,
									file: res.data.gift.file,
									rose: res.data.gift.rose
								},
								anchor: {
									id: res.data.rome.user.id,
									name: res.data.rome.user.name,
									avatar: res.data.rome.user.avatar,
									sex: res.data.rome.user.sex,
									age: res.data.rome.user.age,
									city: res.data.rome.user.city,
								},
								minute: res.data.minute,
								type: res.data.rome.type,
							}
							uni.redirectTo({
								url: '../live/live_room?live=' + encodeURIComponent(JSON.stringify(live))
							});
						}
					})
				}
				if (this.type == 'public') {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V1.LoveDetail',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						id: this.inviteInfo.roomid
					}, res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
						if (res.status) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + res.data.rome.id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('------>申请加群', imResponse.data)
							}).catch(imError => {
								console.warn('------>申请加群失败', imError);
							});
							getApp().globalData.invite_list = res.data.list;
							let live = {
								room: {
									id: res.data.rome.id,
									name: res.data.rome.name,
								},
								character: 'audience',
								rose: res.data.rose,
								url: res.data.play,
								count: res.data.list.length,
								ratio: res.data.ratio,
								gift: {
									id: res.data.gift.id,
									name: res.data.gift.name,
									file: res.data.gift.file,
									rose: res.data.gift.rose
								},
								anchor: {
									id: res.data.rome.user.id,
									name: res.data.rome.user.name,
									avatar: res.data.rome.user.avatar,
									sex: res.data.rome.user.sex,
									age: res.data.rome.user.age,
									city: res.data.rome.user.city,
								},
								type: res.data.rome.type,
							}
							uni.redirectTo({
								url: '../live/live_room?live=' + encodeURIComponent(JSON.stringify(live))
							});
						}
					})
				}
				if (this.type == 'seven') {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V2.LiveJoin',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						type: '7',
						id: this.inviteInfo.roomid
					}, res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
						if (res.status) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + res.data.one.id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('申请加群成功', JSON.stringify(imResponse.data))
							}).catch(imError => {
								console.warn('申请加群失败', imError);
							});
							let live = {
								room: {
									id: res.data.one.id,
									name: res.data.one.name,
								},
								character: 'audience',
								url: res.data.play,
								anchor: {
									id: res.data.one.user.id,
									name: res.data.one.user.name,
									avatar: res.data.one.user.avatar,
									sex: res.data.one.user.sex,
									age: res.data.one.user.age,
									city: res.data.one.user.city,
								},
							}
							uni.redirectTo({
								url: '../live/seven_room?live=' + encodeURIComponent(JSON.stringify(live))
							});
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: none;
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	.invite-popup {
		display: flex;
		flex-direction: column;
		width: 600upx;
		height: 540upx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	/* 邀请弹窗 */
	.invite-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.avatar {
		width: 300rpx;
		height: 300rpx;
	}
	.user-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 300rpx;
		height: 100rpx;
		padding: 0 20rpx;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.name {
		width: 260rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5rpx;
	}
	.anchor-wrap {
		width: 300rpx;
		height: 300rpx;
		position: relative;
	}
	.anchor-avatar {
		border-top-left-radius: 20rpx;
	}
	.tag {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 3rpx 15rpx;
		background-color: #ED4574;
		border-radius: 20px;
	}
	.tag-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}
	.tag-title {
		font-size: 20rpx;
		color: #FFFFFF;
	}
	.audience-wrap {
		width: 300rpx;
		height: 300rpx;
		position: relative;
	}
	.audience-avatar {
		border-top-right-radius: 20rpx;
	}
	.info {
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.invite-intro {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 120rpx;
		padding: 0 20rpx;
		overflow: hidden;
		text-align: center;
	}
	.title {
		font-size: 36rpx;
		color: #333333;
	}
	.intro {
		font-size: 28rpx;
		color: #666666;
		margin-top: 5rpx;
	}
	.btn-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		padding: 0 20rpx;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		padding: 0 20rpx;
	}
	button {
		width: 100%;
	}
</style>
